<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>酒 精 测 试 动 作 识 别</title>
    
    <link rel="stylesheet" href="./css/mprogress.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="contain">
        <div class="header">
            <span>酒 精 测 试 动 作 识 别</span>
        </div>
        <!-- <div id="des" style="width:100px;height:100%;background: red;" ></div> -->
        <div class="main">
            <div class="title"></div>
            <div class="mainC">
                <div class="left"></div>
                <div class="geduan"></div>
                <div class="right">
                            <div class="date">
                                    <div class="date-l">
                                        <p class="XQ"></p>
                                        <p class="time"><span class="y"></span>年<span class="m"></span>月<span class="d"></span>日</p>
                                    </div>
                                    <div class="date-r">
                                        <div class="rtime"></div>
                                    </div>
                                </div>
                                <div class="user">姓名：<span class="name"></span></div>
                                <div class="sex">性别：<span class="user-sex"></span></div>
                                <div class="department">部门：<span class="user-department"></span></div>
                                <div class="nowAction">当前动作：<span class="action"></span></div>
                                <div id="process"></div>
                    </div>
            </div>
        </div>
    </div>
    
    <script src="./js/mprogress.min.js"></script>
  
    <script src="./js/jquery-1.7.2.js"></script>
    <script src="./js/index.js"></script>
    <script src="./webScoket/sockjs.min.js"></script>
    <script src="./webScoket/stomp.min.js"></script>
    <script>
     var stompClient = null;
        connect();
        setTimeout(function(){
           connect1()
        },3000)
        function connect() {
                // var socket = new SockJS('http://192.168.50.86:7080/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。  
                var socket = new SockJS('http://192.168.50.128:7777/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
                stompClient = Stomp.over(socket);//2创建STOMP协议的webSocket客户端。
                stompClient.connect({}, function( frame) {//3连接webSocket的服务端。
                    // setConnected(true);
                    console.log('开始进行连接Connected: ' + frame);
                    //4通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
                    stompClient.subscribe('http://192.168.50.128:7777/topic/getResponse', function(respnose){
                        // stompClient.subscribe('http://192.168.50.86:7080/topic/getResponse', function(respnose){                       
                        showResponse(JSON.parse(respnose.body).responseMessage);
                    });
                    //4通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
                    stompClient.subscribe( '/user/' + "face" + '/msg',function(respnose){
                        // stompClient.subscribe('/user/51/msg', function(respnose){     
                        console.log(respnose);

                        showResponse(JSON.parse(respnose.body));
                    });
                });
            }
            function connect1() {
                var socket = new SockJS('http://192.168.50.128:7777/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
                // var socket = new SockJS('http://192.168.50.86:7080/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。                
                stompClient = Stomp.over(socket);//2创建STOMP协议的webSocket客户端。
                stompClient.connect({}, function(frame) {//3连接webSocket的服务端。
                    // setConnected(true);
                    console.log('开始进行连接Connected: ' + frame);
                    //4通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
                    stompClient.subscribe('http://192.168.50.128:7777/topic/getResponse', function(respnose){
                    // stompClient.subscribe('http://192.168.50.86:7080/topic/getResponse', function(respnose){                       
                        showResponse(JSON.parse(respnose.body).responseMessage);
                    });
                    //4通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
                    stompClient.subscribe('/user/' + "behaviour" + '/msg',function(respnose){
                    // stompClient.subscribe('/user/51V/msg', function(respnose){                       
                        console.log(respnose);
                        showResponse1(JSON.parse(respnose.body));
                // console.log(message)
            
                    });
                });
            }
            function disconnect() {
                if (stompClient != null) {
                    stompClient.disconnect();
                }
                setConnected(false);
                console.log("Disconnected");
            }
            function sendName() {
                var name = $('#name').val();
                //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
                stompClient.send("/ws-push/welcome", {}, JSON.stringify({ 'name': name }));
            }
            function showResponse(data){
                getData(data)
            } 
            function showResponse1(data){
              
        
                getData1(data)
            }
    </script>
</body>
</html>